<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工管理</title>

    <link rel="stylesheet" href="../lib/element-plus/index.css">
    <style>

        .el-select {
            width: 100%;
        }

        /*.el-row{*/
        /*     !*margin-top: 10px;*!*/

        /*     padding: 10px;*/
        /*}*/

        .query-box{
             margin-top: 25px;
             margin-bottom: 10px;
        }

        /**  图标库 ： font-awsome
        */
    </style>
    <link rel="stylesheet" href="../lib/font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.css">

</head>
<body>


<div id="app">

    <el-row>

        <el-breadcrumb separator="/">
            <el-breadcrumb-item>主页</el-breadcrumb-item>
            <el-breadcrumb-item>档案管理</el-breadcrumb-item>
            <el-breadcrumb-item>员工信息</el-breadcrumb-item>
        </el-breadcrumb>

    </el-row>
    <el-row  class="query-box">
        <el-col :span="24">
            <el-form label-width="120px">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="员工姓名">
                            <el-input></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="员工部门">
                            <el-select v-model="query.dept.id">
                                <el-option v-for="dept in dict.depts" :value="dept.id" :label="dept.name"></el-option>
                            </el-select>
                        </el-form-item>

                    </el-col>
                    <el-col :span="8"></el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="职务">
                            <el-select v-model="query.job.id">
                                <el-option v-for="job in dict.jobs" :value="job.id" :label="job.name"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">

                        <el-form-item label="在职状态">
                            <el-select v-model="query.state.id">
                                <el-option v-for="state in dict.states"
                                           :value="state.id" :label="state.name"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item>
                            <el-button type="success" @click="btnQueryClick"> 搜素</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-col>

    </el-row>
    <el-row>
        <el-button-group>
            <el-button type="success" @click="btnEnterClick">入职</el-button>
            <el-button type="warning">转职</el-button>
            <el-button type="danger">离职</el-button>
            <el-button type="info">导入</el-button>
            <el-button type="primary">导出</el-button>
        </el-button-group>
        <el-table :data="employees.filter(function (emp){
         return emp.state.id==1})">
            <el-table-column prop="name" label="员工姓名"></el-table-column>
            <el-table-column prop="dept.name" label="部门"></el-table-column>
            <el-table-column prop="job.name" label="职务"></el-table-column>
            <el-table-column prop="state.name" label="在职状态"></el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="warning" @click="btnChangeClick(scope.row)">
                        <i class="fa fa-address-card"></i> --转职</el-button>
                    <el-button type="danger" @click="btnQuiteClick(scope.row)">离职</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="example-pagination-block">
            <el-pagination layout="prev, pager, next" :total="1000" />
        </div>

    </el-row>


    <el-dialog v-model="info.isShow">
        <template #header>
            <h3>{{info.title}}</h3>
        </template>

        <el-form label-width="120px">

            <el-form-item label="员工姓名">
                <el-input v-model="info.employee.name">

                </el-input>
            </el-form-item>

            <el-form-item label="部门">
                <el-select v-model="info.employee.dept.id">
                    <el-option v-for="dept in dict.depts" :value="dept.id" :label="dept.name"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="职务">
                <el-select v-model="info.employee.job.id">
                    <el-option v-for="job in dict.jobs" :value="job.id" :label="job.name"></el-option>
                </el-select>
            </el-form-item>


            <el-form-item>
                <el-button type="success" @click="btnSubmitClick">确定</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>

</div>

</body>
<script src="../lib/mock.js"></script>
<script src="../mock/list.js"></script>
<script src="../lib/vue.global.js"></script>

<script src="../lib/element-plus/index.full.js"></script>
<script>

    depts.unshift({
        id: -1,
        name: '所有部门'
    })

    jobs.unshift({
        id: -1,
        name: '所有职务'
    })

    states.unshift({
        id: -1,
        name: '所有状态'
    })


    var app = Vue.createApp({
        data: function () {
            return {
                employees: empployees.list,
                query: {
                    name: '',
                    dept: {
                        id: -1
                    },
                    job: {
                        id: -1
                    }, state: {
                        id: -1
                    }
                }, dict: {
                    depts: depts,
                    jobs: jobs,
                    states: states
                }, info: {
                    title: '员工入职',
                    isShow: false,
                    employee: {
                        id: -1,
                        name: '',
                        dept: {
                            id: -1
                        },
                        job: {
                            id: -1
                        },
                        state: {
                            id: 1,
                            name: '在职'
                        }
                    }
                }
            }
        }, methods: {
            btnQueryClick: function () {

                var _this = this;

                this.employees = this.employees.filter(function (emp) {
                    return emp.dept.id == _this.query.dept.id;

                })
            },
            btnEnterClick: function () {

                this.info.employee = {
                    id: -1,
                    name: '',
                    dept: {
                        id: -1
                    },
                    job: {
                        id: -1
                    },
                    state: {
                        id: 1,
                        name: '在职'
                    }
                }

                this.info.isShow = true;
            }, btnSubmitClick: function () {
                var _this = this;
                var currentRow;
                this.info.employee.dept = depts.find(function (dept) {
                    return dept.id == _this.info.employee.dept.id;
                })
                this.info.employee.job = jobs.find(function (job) {
                    return job.id == _this.info.employee.job.id;
                })


                if (this.info.employee.id == -1) {
                    this.employees.unshift(this.info.employee);
                } else {

                    this.employees.find(function (emp) {
                        return emp.id == _this.info.employee.id;
                    })

                    currentRow = this.info.employee;
                }


                this.info.isShow = false;
            }, btnChangeClick: function (row) {

                this.info.title = '员工转职';

                this.info.employee = row;

                console.log(this.info.employee);

                this.info.isShow = true;

            }
            , btnQuiteClick: function (row) {

                // if (confirm('是否对当前员工进行离职操作？')) {
                //
                //     row.state = {id: 2, name: '离职'};
                // }


                this.$confirm('是否对当前员工进行离职操作？','员工离职',{
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(function (res){
                     if(res){
                         row.state = {id: 2, name: '离职'};
                     }
                })

            }
        }
    });

    app.use(ElementPlus).mount('#app');

</script>
</html>